<template>
    <nav>
        <ul>
            <li>
                <router-link :to="{path:'/daily-view',query:{}}" @click="daily">
                    <svg>
                        <use xlink:href="#icon-rili"></use>
                    </svg>
                    <span>每日推荐</span>
                </router-link>
            </li>
            <li>
                <router-link to="/private-view">
                    <svg>
                        <use xlink:href="#icon-shouyinji"></use>
                    </svg>
                    <span>私人FM</span>
                </router-link>
            </li>
            <li>
                <router-link to="/songsheet-view">
                    <svg>
                        <use xlink:href="#icon-yinleyule"></use>
                    </svg>
                    <span>歌单</span>
                </router-link>
            </li>
            <li>
                <router-link to="/ranking-view">
                    <svg>
                        <use xlink:href="#icon-phb"></use>
                    </svg>
                    <span>排行榜</span>
                </router-link>
            </li>
            <li>
                <router-link to="/audio-view">
                    <svg>
                        <use xlink:href="#icon-shujiyuedu"></use>
                    </svg>
                    <span>有声书</span>
                </router-link>
            </li>
            <li>
                <router-link to="/album-view">
                    <svg>
                        <use xlink:href="#icon-zhuanji"></use>
                    </svg>
                    <span>数字专辑</span>
                </router-link>
            </li>
            <li>
                <router-link to="/live-view">
                    <svg>
                        <use xlink:href="#icon-zhibo"></use>
                    </svg>
                    <span>直播</span>
                </router-link>
            </li>
            <li>
                <router-link to="/newssong-view">
                    <svg>
                        <use xlink:href="#icon-yonghu"></use>
                    </svg>
                    <span>关注新歌</span>
                </router-link>
            </li>
            <li>
                <router-link to="/meetsong-view">
                    <svg>
                        <use xlink:href="#icon-xingxing"></use>
                    </svg>
                    <span>歌房</span>
                </router-link>
            </li>
            <li>
                <router-link to="/games-view">
                    <svg>
                        <use xlink:href="#icon-youxi"></use>
                    </svg>
                    <span>游戏专区</span>
                </router-link>
            </li>
        </ul>
    </nav>
</template>

<script>
    import {getBanner} from "@/api";

    export default {
        name: "NavCom",
        data(){
            return{
                dailyData:null
            }
        },
        methods:{
            daily(){
                getBanner('/recommend/songs')
                    .then(response=>{
                        this.dailyData=response.data
                        console.log(response.data)
                    })
            }
        }
    }
</script>

<style scoped>
    nav{
        width: 100%;
        height: 80px;
        background: #fff;
        margin: 10px auto;
        overflow-x: scroll;
        overflow-y: hidden;
        position: relative;
        border-radius: 10px;
    }
    nav::-webkit-scrollbar{
        display: none;
    }
    nav>ul{
        width: 700px;
        height: 100%;
        margin: 0 auto;
        position: relative;
    }
    li{
        width: 60px;
        height: 60px;
        float: left;
        margin: auto 2% auto 0;
        margin-top: 10px;
        position: relative;
        text-align: center;
    }
    li svg{
        width: 70%;
        height: 60%
    }
    li span{
        display: inline-block;
        font-size: 12px;
    }
</style>